<template>
  <div class="order-refund-actions">
    <van-button round plain size="small" v-if="showCancelButton" @click="handleCancel">取消申请</van-button>
    <van-button round plain size="small" type="primary" :to="'/orders/' + refund.orderId + '/refunds/' + refund.id">查看详情</van-button>
  </div>
</template>

<script>
import { order } from "@mall/api-services"
import { Button, Dialog } from "vant"

const { OrderDisputeStatus } = order

export default {
  name: "OrderDisputeActions",
  components: {
    [Button.name]: Button,
    [Dialog.name]: Dialog,
  },
  props: {
    refund: Object,
  },
  computed: {
    refundStatus() {
      return this.refund.status
    },
    showCancelButton() {
      const { refundStatus } = this
      return refundStatus === OrderDisputeStatus.Applying
    },
  },
  data() {
    return {
      confirmPickupDialogVisible: false,
    }
  },
  methods: {
    handleCancel() {
      const { refund } = this
      new Promise((resolve, reject) => {
        this.$dialog.confirm({
          confirmButtonText: "再考虑下",
          cancelButtonText: "取消申请",
          message: "订单还未付款，确定要取消吗？",
        }).then(reject)
            .catch(resolve)
      })
          .then(() => order.OrderServiceV1.cancelOrderRefund(refund.orderId, refund.id))
          .then(() => this.$emit("cancel"))
    },
  },
}
</script>

<style lang="scss" scoped>
.order-refund-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;

  .van-button {
    margin-left: 9px;
    width: 80px;
  }
}
</style>
